<template>
  <div class="add">
    <div class="add-header-container">
      <div class="jzt-flex-bt add-header">
        <title-view :title="`${title}商品定制模版`" />
        <div>
          <el-button type="primary" style="width: 80px" @click="handleSave">保存</el-button>
          <el-button type="primary" plain style="width: 80px" @click="handleCancel">取消</el-button>
        </div>
      </div>
    </div>
    <div class="add-container">
      <el-form ref="formRef" :model="formData" label-width="auto" class="demo-dynamic">
        <div style="padding: 20px 20px 14px">
          <el-form-item
            prop="templateCustomType"
            label="定制类型"
            :rules="[
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]"
          >
            <el-select v-model="formData.templateCustomType" placeholder="选择单位" style="width: 820px">
              <el-option v-for="item in optionsType" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item
            prop="templateName"
            label="模版名称"
            :rules="[
              {
                required: true,
                message: '请输入',
                trigger: 'blur'
              }
            ]"
          >
            <el-input v-model="formData.templateName" placeholder="请输入模版名称标题" style="width: 820px" :maxlength="20" />
          </el-form-item>
          <el-form-item prop="remark" label="备注">
            <el-input
              style="width: 820px"
              type="textarea"
              :autosize="{ minRows: 3, maxRows: 5 }"
              v-model="formData.remark"
              show-word-limit
              :maxlength="200"
              placeholder="请输入质保时间周期“按月计算”"
            />
          </el-form-item>
        </div>
        <div class="line"></div>
        <div class="add-rules-container">
          <div class="add-rules-title">商品定制类型配制</div>
          <div class="add-list" v-for="(item, index) in formData.templateDetailList" :key="item">
            <div class="add-list-header">
              <div class="flex">
                <el-form-item
                  :prop="`templateDetailList[${index}].specificationText`"
                  label="定制规则"
                  :rules="[
                    {
                      required: true,
                      message: '请输入',
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-input v-model="item.specificationText" placeholder="请输入" style="width: 250px" :maxlength="60" />
                </el-form-item>
                <el-form-item
                  :prop="`templateDetailList[${index}].productUnit`"
                  label=""
                  label-width="0"
                  :rules="[
                    {
                      required: true,
                      message: '请选择单位',
                      trigger: 'blur'
                    }
                  ]"
                >
                  <el-select v-model="item.productUnit" placeholder="选择单位" style="width: 125px">
                    <el-option
                      v-for="item in optionsUnit"
                      :key="Number(item.dictValue)"
                      :label="item.dictLabel"
                      :value="Number(item.dictValue)"
                    />
                  </el-select>
                </el-form-item>
              </div>
              <img class="del-icon" src="@/assets/images/del.png" alt="" @click="handleDelete(index)" />
            </div>
            <div class="add-list-text">
              <div class="list-text list-text-border">
                <div class="flex list-text-item">
                  <el-form-item
                    :prop="`templateDetailList[${index}].addNum`"
                    label="每增加"
                    :rules="[
                      {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                      },
                      { validator: checkAmount, trigger: 'blur' }
                    ]"
                  >
                    <el-input v-model="item.addNum" placeholder="请输入" type="number" :min="0" />
                  </el-form-item>
                  <el-form-item
                    :prop="`templateDetailList[${index}].addAmount`"
                    label="增加金额"
                    :rules="[
                      {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                      },
                      { validator: checkAmount, trigger: 'blur' }
                    ]"
                  >
                    <div class="flex">
                      <el-input v-model="item.addAmount" placeholder="请输入" type="number">
                        <template #append> 元</template>
                      </el-input>
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="标品成本价+增加数值*增加金额价格{如:标品100元、增加金额10元，增加值为1、=100+(1*10)=110元}"
                        placement="top"
                      >
                        <img class="wen-icon" src="@/assets/images/wenhao.png" alt="" />
                      </el-tooltip>
                    </div>
                  </el-form-item>
                </div>
                <div class="flex list-text-item">
                  <el-form-item
                    :prop="`templateDetailList[${index}].reduceNum`"
                    label="每减少"
                    :rules="[
                      {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                      },
                      { validator: checkAmount, trigger: 'blur' }
                    ]"
                  >
                    <el-input v-model="item.reduceNum" placeholder="请输入" type="number" />
                  </el-form-item>
                  <el-form-item
                    :prop="`templateDetailList[${index}].reduceAmount`"
                    label="减项金额"
                    :rules="[
                      {
                        required: true,
                        message: '请输入',
                        trigger: 'blur'
                      },
                      { validator: checkAmount, trigger: 'blur' }
                    ]"
                  >
                    <div class="flex">
                      <el-input v-model="item.reduceAmount" placeholder="请输入" type="number">
                        <template #append> 元</template>
                      </el-input>
                      <el-tooltip
                        class="box-item"
                        effect="dark"
                        content="标品成本价+减项数值*减项金额价格 {如:标品100元、减项金额10元，减项值为1、=100-(1*10)=90元)"
                        placement="top"
                      >
                        <img class="wen-icon" src="@/assets/images/wenhao.png" alt="" />
                      </el-tooltip>
                    </div>
                  </el-form-item>
                </div>
              </div>
              <div class="list-text">
                <Editor v-model="item.standardText" placeholder="请输入标准说明" :height="124" />
              </div>
            </div>
          </div>
          <div class="add-buts" @click="handleAdd"><img src="@/assets/images/add.png" alt="" /><span>新增制定规则</span></div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { configEdit, templateDetail } from "@/apis/products/shopConfig";
import { selectDictDataByType } from "@/apis/dict/dict";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const title = ref("新增");
const optionsType = ref([]);
const optionsUnit = ref([]);
const formRef = ref();
const formData = ref({
  templateDetailList: []
});

const getType = async () => {
  const { data } = await selectDictDataByType("shop_template_custom_type");
  optionsType.value = data;
};
const getUnit = async () => {
  const { data } = await selectDictDataByType("shop_unit");
  optionsUnit.value = data;
};
getUnit();
getType();
// 获取详情
const getTemplateDetail = async () => {
  const { data } = await templateDetail({ customTemplateId: route.query.customTemplateId });
  formData.value = { ...data, templateCustomType: data.templateCustomType.toString() };
};
if (route.query.customTemplateId) {
  getTemplateDetail();
}
// 新增
const handleAdd = () => {
  formData.value.templateDetailList.push({});
};
const handleCancel = () => {
  router.push({ path: "/shopConfig/customization/list" });
};
const checkAmount = (rule, value, callback) => {
  if (value < 0) {
    return callback(new Error("不能为负数"));
  } else {
    callback();
  }
};
const handleSave = () => {
  formRef.value.validate(async (valid, fields) => {
    if (valid) {
      await configEdit(formData.value);
      ElMessage.success("保存商品定制模板成功");
      router.back();
    } else {
      console.log(fields);
    }
  });
};
const handleDelete = i => {
  formData.value.templateDetailList.splice(i, 1);
};
</script>

<style scoped lang="scss">
@import "index";
</style>
